import * as API from '@/services';
import { Tabs } from 'antd';
import { KfPagingTablePagePropsAction, useBackendEnum } from 'kf-web-library';
import React, { useRef, useState } from 'react';
import { useAccess, useLocation } from 'umi';
import QuickForm from './components/QuickForm';
import './index.less';
import MaterialList from './components/MaterialList';
import { PageHeader } from '@ant-design/pro-layout';

type Entity = API.Material;
type EntityPageQueryParams = API.MaterialPageQueryParams;
const entityTypeName = '素材库';
const EntityQuickForm = QuickForm;

interface EntityTableListProps {
}

/**
 * 素材库 列表页面
 */
const EntityTableList: React.FC<EntityTableListProps> = (props) => {
  const location = useLocation();
  const access = useAccess();
  const {enumDict, enumTypeDict, getBackendEnum} = useBackendEnum();
  const actionRef = useRef<KfPagingTablePagePropsAction<Entity, EntityPageQueryParams>>();
  const [type, setType] = useState("IMG");

  return (
    <PageHeader title={false}>
      <Tabs defaultActiveKey="IMG" onChange={setType} className={"material-group-tabs"}>
        <Tabs.TabPane tab="视频" key="VIDEO">
          <MaterialList type={"VIDEO"}/>
        </Tabs.TabPane>
        <Tabs.TabPane tab="图片" key="IMG">
          <MaterialList type={"IMG"}/>
        </Tabs.TabPane>
        <Tabs.TabPane tab="文档" key="FILE">
          <MaterialList type={"FILE"}/>
        </Tabs.TabPane>
      </Tabs>
    </PageHeader>
  );
};

export default EntityTableList;
